/**
 * 图片上传组件
 * @author: minzhang
 * @update: 2016-11-24
 */

import React, { PropTypes } from 'react';
import { Upload, Icon, Modal, message, } from 'antd';

const CommonUpload = React.createClass({
	
  getInitialState() {
    return {
      previewVisible: false,
			previewImage: '',
			previewImageName: '',
			fileList: this.props.fileList || [],
    };
  },
	
//	componentWillReceiveProps(nextProps) {
//    // Should be a controlled component.
//    if ('fileList' in nextProps) {
//      const fileList = nextProps.fileList;
//      this.setState({fileList});
//    }
//  },
	
	handleCancel() {
		this.setState({ previewVisible: false })
	},

  handlePreview(file) {
    this.setState({
      previewImage: file.url,
      previewImageName: file.name,
      previewVisible: true,
    });
  },
	
	handleBeforeUpload(file) {
		const type = file.type;
		const maxSize = this.props.maxSize || 5242880; // 默认5M的文件大小字节数
		const errTip = `图片大小不能超过${this.props.maxSizeTip || '5M'}`;
		const isImg = (type === 'image/jpg') 
							|| (type === 'image/jpeg') 
							|| (type === 'image/png') 
							|| (type === 'image/gif') 
							|| (type === 'image/bmp');
		
		if (!isImg) {
			message.error('请上传图片文件');
			return false;
		}
		if(file.size > maxSize) {
			message.error(errTip);
			return false;
		}

		return isImg;
	},
	
	handleRemove(info) {
		message.success('删除成功');
		
//		const onRemove = this.props.onRemove;
//		onRemove && onRemove(file);
	},

  handleChange(file) {
		let fileList = file.fileList;

		// 1. Limit the number of uploaded files
		//    Only to show two recent uploaded files, and old ones will be replaced by the new
		fileList = fileList.slice(-1);

		// 2. read from response and show file link
		fileList = fileList.map((file) => {
			if (file.response) {
				// Component will show file.url as link
//				file.url = file.response.data.image_url;
//				file.key = file.response.data.image_id;
				file.url = file.thumbUrl;
				file.key = file.uid;
			}
			return file;
		});

		// 3. filter successfully uploaded files according to response from server
		fileList = fileList.filter((file) => {
			if (file.response) {
				return file.response.success === true;
			}
			return true;
		});

		if (fileList.status === 'error') {
			message.error('上传失败');
		}
		
		this.setState({ fileList: file.fileList });
		
		const onChange = this.props.onChange;
		onChange && onChange(file);
	},
		
  render() {
		const { previewVisible, previewImage, fileList } = this.state;
		let { action, maxLength, } = this.props;
		
		maxLength = maxLength || 1;
		
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
		
    return (
      <div className="clearfix">
        <Upload
          action={action}
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          beforeUpload={this.handleBeforeUpload}
          onChange={this.handleChange}
          onRemove={this.handleRemove}
        >
          {fileList.length >= maxLength ? null : uploadButton}
        </Upload>
        <Modal 
					wrapClassName="vertical-center-modal"
					className="preview-modal"
					visible={previewVisible} 
					footer={null} 
					onCancel={this.handleCancel}  
				>
          <img alt={previewImage} src={previewImage} style={{ width: '100%' }} />
        </Modal>
      </div>
    );
  },
});

CommonUpload.propTypes = {
	action: PropTypes.any,
	fileList: PropTypes.any,
	maxLength: PropTypes.any,
	maxSize: PropTypes.any,
	maxSizeTip: PropTypes.any,
	onChange: PropTypes.func,
};

export default CommonUpload;